<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小黄人</title>
		<style>			
			/* 绘制身体 */
			body{
			    margin: 0;
			    padding:0;
			}
			.wrapper{
			    width: 300px;
			    margin:100px auto;
			}
			.litteH{
			    position: relative;
			}
			.bodyH{
			    position: absolute;
			    width: 240px;
			    height: 400px;
			    border:5px solid #000;
			    border-radius: 115px;
			    background: rgb(249,217,70);
			    overflow: hidden;
			    z-index: 2;
			}
			/* 穿裤子 */
			.bodyH .condoleBelt{
			    position: absolute;
			}
			.bodyH .trousers{
			    position: absolute;
			    bottom: 0;
			    width: 100%;
			    height: 100px;
			    border-top: 6px solid #000;
			    background: rgb(32,116,160);
			}
			.trousers_top{
			    width: 160px;
			    height: 60px;
			    border:6px solid #000;
			    border-bottom: none;
			    border-radius: 0 0 5px 5px;
			    background: rgb(32,116,160);
			    position: absolute;
			    bottom: 100px;
			    left:34px;
			}
			/* 加吊带 after伪类实现吊带上的小黑点 */
			.bodyH .condoleBelt .left,
			.bodyH .condoleBelt .right{
			    width: 100px;
			    height: 16px;
			    border:5px solid #000;
			    background: rgb(32,116,160);
			    position: absolute;
			    top:-90px;
			    left:-35px;
			    z-index: 2;
			    -webkit-transform:rotate(45deg);
			}
			.bodyH .condoleBelt .left{
			    top:-88px;
			    left:165px;
			    -webkit-transform:rotate(-45deg);
			}
			.bodyH .condoleBelt .left:after,
			.bodyH .condoleBelt .right:after{
			    content: '';
			    width: 8px;
			    height: 8px;
			    border-radius: 50%;
			    background: #000;
			    position: absolute;
			    top:4px;
			    left:88px;
			}
			 
			.bodyH .condoleBelt .left:after{
			    left:5px;
			}	
			/* 把裤袋和一下修饰的边边给实现 */		
			/* 注意两点：
1.我把裤子放在身体里面，然后给.bodyH添加overflow:hidden，这样我们就不用去多虑溢出怎么办，而且很轻松就能实现裤子的效果；

2.可以看到裤子两边有两条有弧度的曲线段，我是通过给矩形某一个角实现圆角效果，然后只设置与这个角相邻的两条边的边框样式，然后旋转一下角度就实现这个效果了，当然只能实现简单一点的效果。*/
			.pocket{
			    width: 60px;
			    height: 45px;
			    border:6px solid #000;
			    border-radius: 0px 0px 25px 25px;
			    position: absolute;
			    bottom:65px;
			    left:84px;
			}
			.line_right{
			    width: 30px;
			    height: 30px;
			    border-bottom-left-radius: 100px;
			    border-bottom:6px solid #000;
			    border-left:6px solid #000;
			    position: absolute;
			    left: 0;
			    bottom:60px;
			    -webkit-transform:rotate(-75deg);
			}
			.line_left{
			    width: 30px;
			    height: 30px;
			    border-bottom-right-radius: 100px;
			    border-bottom:6px solid #000;
			    border-right:6px solid #000;
			    position: absolute;
			    right: 0;
			    bottom:63px;
			    -webkit-transform:rotate(75deg);
			}
			.line_bottom{
			    height: 40px;
			    border:3px solid #000;
			    border-radius: 3px;
			    position: absolute;
			    left:118px;
			    bottom: 0px;
			}			
			/* 眼睛的部分 */
			/* 先画眼镜，然后黑眼珠，再画白点，最后我才画的眼镜框，眼睛框我是用：after伪元素实现的 */
			.eyes{
			    position: relative;
			    z-index: 3;
			}
			.eyes .leftEye,.eyes .rightEye{
			    width: 85px;
			    height: 85px;
			    border-radius: 50%;
			    border:6px solid #000;
			    background: #fff;
			    position: absolute;
			    top:60px;
			    left: 27px;
			}
			.eyes .leftEye{
			    left: 124px;
			}
			.eyes .leftEye .left_blackEye,
			.eyes .rightEye .right_blackEye{
			    width: 40px;
			    height: 40px;
			    border-radius: 50%;
			    background: #000;
			    position: absolute;
			    top:24px;
			    left:22px;
			}
			.eyes .leftEye .left_blackEye .left_white,
			.eyes .rightEye .right_blackEye .right_white{
			    width: 20px;
			    height: 20px;
			    border-radius: 50%;
			    background: #fff;
			    position: absolute;
			    top:7px;
			    left:17px;
			}
			.eyes .leftEye .left_blackEye .left_white{
			    top:4px;
			    left:17px;
			}
			.eyes .leftEye:after,
			.eyes .rightEye:after{
			    content: '';
			    width: 28px;
			    height: 18px;
			    background: #000;
			    position: absolute;
			    left:-30px;
			    top:37px;
			    -webkit-transform:skewX(20deg) rotate(7deg);
			}
			.eyes .leftEye:after{
			    left:89px;
			    top:37px;
			    -webkit-transform:skewX(-20deg) rotate(-7deg);
			}	
			/* 嘴巴部分 */		
			/* 首先也是通过矩形其中一个角实现圆角来模拟嘴巴形状，再加以旋转： */
			.mouse{
			    position: relative;
			}
			.mouse .mouse_shape{
			    width: 55px;
			    height: 35px;
			    border:5px solid #000;
			    border-bottom-left-radius: 30px;
			    background: #fff;
			    position: absolute;
			    top:175px;
			    left:98px;
			    z-index: 3;
			    -webkit-transform:rotate(-35deg);
			}		
            /*结果是这样的，那么想要达到我们预期的效果，就需要把上半部分给遮掉，所以我用：after伪元素来实现遮罩效果：*/
			.mouse .mouse_shape:after{
			    content: '';
			    width: 70px;
			    height: 32px;
			    border-bottom:5px solid #000;
			    border-radius:35px 26px 5px 5px;
			    background: red;
			    position: absolute;
			    top:-16px;
			    left:3px;
			    -webkit-transform:rotate(34deg);}
			/* 红色部分就是遮罩了，也是一个矩形，设置了底边框，实现和嘴巴下半部分形成闭合效果，现在我们就可以把颜色改成肤色就行了： */			
			.mouse .mouse_shape:after{
			    content: '';
			    width: 70px;
			    height: 32px;
			    border-bottom:5px solid #000;
			    border-radius:35px 26px 5px 5px;
			    background: rgb(249,217,70);
			    position: absolute;
			    top:-16px;
			    left:3px;
			    -webkit-transform:rotate(34deg);
			    -webkit-animation: mouse_mask 5s ease-in-out infinite;
			}
			/* 接下来实现双手部分，这一部分不难，就是两个圆角矩形，旋转了角度，然后层级低于身体的层级就行，然后再通过：after伪元素实现胳膊关节处就搞定了。 */
			.hands{
			    position: relative;
			}
			.hands .leftHand,
			.hands .rightHand{
			    width: 80px;
			    height: 80px;
			    border:6px solid #000;
			    border-radius: 25px;
			    background: rgb(249,217,70);
			    position: absolute;
			    top:220px;
			    left:-23px;
			    -webkit-transform:rotate(40deg);
			}
			.hands .leftHand{
			    left:182px;
			    top:220px;
			    -webkit-transform:rotate(-40deg);
			}
			.hands .leftHand:after,
			.hands .rightHand:after{
			    content: '';
			    width: 6px;
			    border:3px solid #000;
			    border-radius: 3px;
			    position: absolute;
			    left:13px;
			    top:50px;
			    -webkit-transform:rotate(90deg);
			}
			 
			.hands .leftHand:after{
			    left:53px;
			    top:50px;
			    -webkit-transform:rotate(-90deg);
			}	
			/* 再接下来就是双脚的部分了，主要就是鞋面的设计，我是通过一个矩形，然后设置不同的圆角值，加上一点点的旋转来模拟的，这一块的话，怎么做我都觉得不是很像，所以最后差不多我就妥协了 */
			.feet{
			    position: relative;
			}
			.feet .left_foot,
			.feet .right_foot{
			    width: 36px;
			    height: 50px;
			    border-bottom-right-radius: 6px;
			    border-bottom-left-radius: 9px;
			    background: #000;
			    position: absolute;
			    top: 406px;
			    left:88px;
			    -webkit-transform-origin: right top;
			}
			.feet .left_foot{
			    border-bottom-right-radius: 9px;
			    border-bottom-left-radius: 6px;
			    left:130px;
			    -webkit-transform-origin: left top;
			}
			.feet .left_foot:after,
			.feet .right_foot:after{
			    content: '';
			    width: 60px;
			    height: 35px;
			    border-radius: 20px 10px 21px 15px;
			    background: #000;
			    position: absolute;
			    left:-36px;
			    top:14.4px;
			    -webkit-transform:rotate(5deg);
			}
			.feet .left_foot:after{
			    border-radius: 10px 20px 15px 21px;
			    left:13px;
			    -webkit-transform:rotate(-5deg);
			}	
            /* 头发，跟裤子差不多 */
			.hair{
			    position: relative;
			}
			.left_hair_one{
			    width: 130px;
			    height: 100px;
			    border-radius: 50%;
			    border-top:8px solid #000;
			    position: absolute;
			    left:17px;
			    top:-17px;
			    -webkit-transform:rotate(27deg);
			}
			.left_hair_two{
			    width: 80px;
			    height: 80px;
			    border-radius: 50%;
			    border-top:6px solid #000;
			    position: absolute;
			    left:45px;
			    top:-10px;
			    -webkit-transform:rotate(15deg);
			}
			
			/*补充脚底阴影部分：*/			
			.groundShadow{
			    width: 200px;
			    height: 2px;
			    border-radius: 50%;
			    background: rgba(0,0,0,0.3);
			    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
			    position: relative;
			    top: 455px;
			    left:25px;
			}
			/*动画 思路*/
			/* 
1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的时间很关键；

2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后不时左右看一下两边的风景，所以眼睛转动很悠哉，所以分配的时间可以稍微长一点点；

3.嘴巴：让嘴巴动起来确实比较难，因为要动的话，遮罩也得实时跟着改变，而且不能露馅，所以最后实现的是当它往左边看了一下之后卖了一下萌；

4.双手和双脚：这部分确实很难逼真，本来脚就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，而且左右脚动作是紧接实现而不是同步实现。双手的话，我是简单模拟人在走路时有摆手的自然惯性，而且是左脚配右手，右脚配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设置为非常小，有效果但不明显。*/
			
		.left_hair_one{
		    -webkit-animation: lefthair 2s ease-in-out infinite;
		}
		@-webkit-keyframes lefthair{
		    0%,25%,31%,100%{
		    }
		    30%{
		        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
		    }
		}
		.eyes .leftEye .left_blackEye,
		.eyes .rightEye .right_blackEye{
		    -webkit-animation: blackeye 5s ease-in infinite;
		}
		@-webkit-keyframes blackeye{
		    0%,20%,50%,70%,100%{
		        -webkit-transform: translateX(0px);
		    }
		    30%,40%{
		        -webkit-transform: translateX(15px);
		    }
		    80%,90%{
		        -webkit-transform: translateX(-15px);
		    }
		}
		.eyes .leftEye .left_blackEye .left_white,
		.eyes .rightEye .right_blackEye .right_white{
		    -webkit-animation: whiteeye 5s ease-in-out infinite;
		}
		@-webkit-keyframes whiteeye{
		    0%,20%,50%,70%,100%{
		        -webkit-transform: translateX(0px);
		    }
		    30%,40%{
		        -webkit-transform: translate3d(3px,4px,0);
		    }
		    80%,90%{
		        -webkit-transform: translate3d(-15px,4px,0);
		    }
		}
		.mouse .mouse_shape{
		    -webkit-animation: mouse 5s ease-in-out infinite;
		}
		@-webkit-keyframes mouse{
		    40%,43%{
		        width: 45px;
		        height: 25px;
		        top:180px;
		    }
		    0%,35%,48%,100%{
		        width: 55px;
		        height: 35px;
		        top:175px;
		        -webkit-transform:rotate(-35deg);
		    }
		}
		.mouse .mouse_shape:after{
		    -webkit-animation: mouse_mask 5s ease-in-out infinite;
		}
		@-webkit-keyframes mouse_mask{
		    40%,43%{
		        width: 60.5px;
		        top:-19.3px;
		        left:1.5px;
		    }
		    0%,35%,48%,100%{
		        width: 70px;
		        top:-16px;
		        left:3px;
		        -webkit-transform:rotate(33deg);
		    }
		}
		.hands .rightHand{
		    -webkit-animation:rightHand .8s ease-in-out infinite;
		}
		@-webkit-keyframes rightHand{
		    0%,50%,100%{
		        -webkit-transform: rotate(40deg);
		    }
		    30%{
		        -webkit-transform: rotate(37deg) translateX(1px);
		    }
		}
		.hands .leftHand{
		    -webkit-animation:leftHand .8s ease-in-out infinite;
		}
		@-webkit-keyframes leftHand{
		    0%,50%,100%{
		        -webkit-transform: rotate(-40deg);
		    }
		    80%{
		        -webkit-transform: rotate(-37deg) translateX(-1px);
		    }
		}
		.feet .right_foot{
		    -webkit-animation: rightfoot .8s ease-in-out infinite;
		}
		@-webkit-keyframes rightfoot{
		    0%,50%,100%{
		        -webkit-transform: rotate(0deg);
		    }
		    80%{
		        -webkit-transform: rotate(10deg);
		    }
		}
		.feet .left_foot{
		    -webkit-animation: leftfoot .8s ease-in-out infinite;
		}
		@-webkit-keyframes leftfoot{
		    0%,50%,100%{
		        -webkit-transform: rotate(0deg);
		    }
		 
		    30%{
		        -webkit-transform: rotate(-10deg);
		    }
		}
		</style>
	</head>
	<body>
		<div class="wrapper"><!-- 容器 -->
		    <div class="littleH"><!-- 小黄人 -->
		        <div class="bodyH"><!-- 身体 -->
		            <div class="trousers"><!-- 裤子 -->
		                <div class="condoleBelt"><!-- 吊带 -->
		                    <div class="left"></div>
		                    <div class="right"></div>
		                </div>
		                <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->
		                <div class="pocket"></div><!-- 裤袋 -->
		                <!-- 三条线 -->
		                <span class="line_left"></span>
		                <span class="line_right"></span>
		                <span class="line_bottom"></span>
		            </div>
		        </div>
		            <div class="hair"><!-- 头发 -->
		                <span class="left_hair_one"></span>
		                <span class="left_hair_two"></span>
		            </div>
		            <div class="eyes"><!-- 眼睛 -->
		                <div class="leftEye"><!-- 左眼 -->
		                    <div class="left_blackEye">
		                        <div class="left_white"></div>
		                    </div>
		                </div>
		                <div class="rightEye"><!-- 右眼 -->
		                    <div class="right_blackEye">
		                        <div class="right_white"></div>
		                    </div>
		                </div>
		            </div>
		            <div class="mouse"><!-- 嘴巴 -->
		                <div class="mouse_shape"></div>
		            </div>
		            <div class="hands"><!-- 双手 -->
		                <div class="leftHand"></div>
		                <div class="rightHand"></div>
		            </div>
		            <div class="feet"><!-- 双脚 -->
		                <div class="left_foot"></div>
		                <div class="right_foot"></div>
		            </div>
		            <div class="groundShadow"></div><!-- 脚底阴影 -->
		    </div>
		</div>		
	</body>
</html>
